import { DataSet, TextField, Select, Row, Col } from 'choerodon-ui/pro';
import React, { useMemo, ReactNode } from 'react';
import inputDS from './inputDataSet';
import styles from "./index.less";

export type RenderProps = {
  text?: string;
};

export type Renderer = (props: RenderProps) => ReactNode;


const { Option } = Select;

const selectBefore = () => (
  <Select defaultValue="http://" style={{ width: 90 }}>
    <Option value="http://">http://</Option>
    <Option value="https://">https://</Option>
  </Select>
);
const selectAfter = () => (
  <Select defaultValue=".com" style={{ width: 80 }}>
    <Option value=".com">.com</Option>
    <Option value=".jp">.jp</Option>
    <Option value=".cn">.cn</Option>
    <Option value=".org">.org</Option>
  </Select>
);

const colorRenderer: Renderer = ({ text }: RenderProps) => (
  <span style={{ color: 'red' }}>{text}</span>
);

const inputAddon: React.FC = (): React.ReactElement => {
  const inputDataSet = useMemo(() => new DataSet(inputDS()), []);
  return (

    <Row className={styles.container} gutter={10}>
      <Col span={12}>
        <TextField
          dataSet={inputDataSet}
          name="first-name"
          renderer={colorRenderer}
          addonBefore={selectBefore()}
          addonAfter={selectAfter()}
        />
      </Col>
    </Row>
  );
};

export default inputAddon;




